var loginbtn = document.querySelector('section .member div span ')
var loginDiagin = document.querySelector('.login .item')
var login = document.querySelector('.login')
//获取loginbtn的点击事件
loginbtn.onclick = function () {
    loginDiagin.style.visibility = 'visible'
    login.style.position = 'absolute'
    login.style.zIndex = 5
}

//表单验证
var isOk1 = 0
var isOk2 = 0
var btnSubmit = document.querySelector('button.submit')
btnSubmit.onclick = function () {
    var ipt1Obj = document.querySelector('input.mobile')
    var ipt2Obj = document.querySelector('input.password')
    if (ipt1Obj.value == '' || ipt1Obj.value.length != 11 || !Number(ipt1Obj.value)) {
        document.querySelector('div.form p:nth-of-type(3)').innerText = '请输入正确的手机号'
    } else {
        isOk1++
        document.querySelector('div.form p:nth-of-type(3)').innerText = ''
    }
    if (ipt2Obj.value == '' || ipt2Obj.value.length != 4 || !Number(ipt2Obj.value)) {
        document.querySelector('div.form p:nth-of-type(4)').innerText = '请输入正确的验证码'
    } else {
        isOk2++
        document.querySelector('div.form p:nth-of-type(4)').innerText = ''
    }
    if (isOk1 && isOk2) {
        alert('登录成功')
        isOk1 = 0
        isOk2 = 0
    }
}



//获取验证码
var captcha = document.querySelector('.login .item .form .captcha')
//绑定点击事件
captcha.onclick = function () {

    //判断用手机号是否填写正确
    var ipt1Obj = document.querySelector('input.mobile')
    var ipt2Obj = document.querySelector('input.password')
    if (ipt1Obj.value == '' || ipt1Obj.value.length != 11 || !Number(ipt1Obj.value)) {
        document.querySelector('div.form p:nth-of-type(3)').innerText = '请输入正确的手机号'

    } else {
        //获取行为验证码
        var captchaObj = document.querySelector('section.captcha')
        // 二、显示
        captchaObj.style.visibility = 'visible'
        captchaObj.style.position = 'absolute'
        captchaObj.style.zIndex = 6
        //绑定鼠标按下事件
        var drag = document.querySelector('section.captcha .drag .btn')
        drag.onmousedown = function (evt) {
            //文档移动事件
            document.onmousemove = function (evt) {
                var e = evt || window.event
                drag.style.left = e.clientX - (captchaObj.offsetLeft - captchaObj.offsetWidth / 2) - drag.offsetWidth / 2 + 'px'
                //console.log(drag.style.left);
                //同步卡片
                captchaObj.querySelector('.check img:nth-of-type(2)').style.left = drag.style.left
            }
        }
        //绑定鼠标松开事件
        document.onmouseup = function () {
            document.onmousemove = null
            var drag = document.querySelector('section.captcha .drag .btn')
            var left = parseInt(drag.style.left)
            //console.log(left);
            if (left >= 260 && left <= 265) {
                // 隐藏
                captchaObj.style.visibility = 'hidden'

                //点击之后按钮就失效
                captcha.disabled = true
                var num = 5
                t = setInterval(function () {
                    //首先出现5秒之后重发
                    captcha.innerText = num + '秒后重发'
                    //判断之后在—减减
                    if (num <= 0) {
                        clearInterval(t)
                        captcha.innerText = '重新获取'
                        //按钮恢复
                        captcha.disabled = false
                        num = 5
                        return
                    }
                    num--
                }, 1000)
            }

            drag.style.left = 0 + 'px'
            captchaObj.querySelector('.check img:nth-of-type(2)').style.left = 0

        }

        //绑定关闭验证码会话框
        var captchaDiag = document.querySelector('.captcha h2 .icon-close')
        captchaDiag.onclick = function () {
            captchaObj.style.visibility = "hidden"
        }
        return
    }

}
//获取关闭按钮
var close = document.querySelector('.login .item .form .close .icon-close')
close.onclick = function () {
    var loginDiagin = document.querySelector('.login .item')
    loginDiagin.style.visibility = 'hidden'
}

//让登入框拖拽
//给menu的按下事件
var menuObj = document.querySelector('.login .item .menu')
menuObj.onmousedown = function (evt) {
    //可获取鼠标按下时的位置
    var oldEld = evt || window.event
    //给网页移动事件
    document.onmousemove = function (evt) {
        var e = evt || window.event
        //获取鼠标的位置
        loginDiagin.style.position = 'absolute'
        var left = e.clientX - oldEld.offsetX
        var top = e.clientY - oldEld.offsetY
        loginDiagin.style.left = left + 'px'
        loginDiagin.style.top = top + 'px'

        //拖拽时不能超过页面 
        if (left <= 0) loginDiagin.style.left = 0
        if (top <= 0) loginDiagin.style.top = 0
        var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - loginDiagin.offsetWidth
        var maxTop = (window.innerHeight || document.documentElement.clientHeight) - loginDiagin.offsetHeight
        if (left > maxLeft) loginDiagin.style.left = maxLeft + 'px'
        if (top > maxTop) loginDiagin.style.top = maxTop + 'px'
    }
}
//给menu的鼠标松开事件
menuObj.onmouseup = function () {
    document.onmousemove = null
}
//禁止网页拖拽图片
document.ondragstart = function () {
    return false;
}
//添加鼠标不允许点击文本的事件
document.onselectstart = function () {
    return false;
}